<template>
	<div class="doc_pc_components_Button">
		<div class="doc-container">
			<Button
				type="text"
			>text</Button>
			<Button
				style="width:100px"
			>default</Button>
			<Button
				type="primary"
				style="width:100px"
			><Ellipsis content="1按钮按钮按钮按钮按钮按钮"/></Button>
			<Button
				type="info"
			>info</Button>
			<Button
				type="success"
			>success</Button>
			<Button
				type="warning"
			>warning</Button>
			<Button
				type="error"
			>error</Button>
		</div>
		<div
			class="doc-container"
			style="background:rgb(241,245,255)"
		>
			<Button
				outline
				type="text"
			>text</Button>
			<Button
				outline
			>default</Button>
			<Button
				outline
				type="primary"
			>primary</Button>
			<Button
				outline
				type="info"
			>info</Button>
			<Button
				outline
				type="success"
			>success</Button>
			<Button
				outline
				type="warning"
			>warning</Button>
			<Button
				outline
				type="error"
			>error</Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
				shape="round"
			>text</Button>
			<Button
				shape="round"
			>default</Button>
			<Button
				type="primary"
				shape="round"
			>primary</Button>
			<Button
				type="info"
				shape="round"
			>info</Button>
			<Button
				type="success"
				shape="round"
			>success</Button>
			<Button
				type="warning"
				shape="round"
			>warning</Button>
			<Button
				type="error"
				shape="round"
			>error</Button>
		</div>
		<div
			class="doc-container"
			style="background:rgb(241,245,255)"
		>
			<Button
				outline
				type="text"
				shape="round"
			>text</Button>
			<Button
				outline
				shape="round"
			>default</Button>
			<Button
				outline
				type="primary"
				shape="round"
			>primary</Button>
			<Button
				outline
				type="info"
				shape="round"
			>info</Button>
			<Button
				outline
				type="success"
				shape="round"
			>success</Button>
			<Button
				outline
				type="warning"
				shape="round"
			>warning</Button>
			<Button
				outline
				type="error"
				shape="round"
			>error</Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
			><Icon name="bi-fingerprint"/>default</Button>
			<Button
				style="width:120px"
			><Icon name="bi-fingerprint"/>default</Button>
			<Button
				type="primary"
				style="width:120px"
			><Icon name="bi-fingerprint"/><Ellipsis content="1按钮按钮按钮按钮按钮按钮"/></Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				type="primary"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				type="info"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				type="success"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				type="warning"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				type="error"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
		</div>
		<div
			class="doc-container"
			style="background:rgb(241,245,255)"
		>
			<Button
				outline
				type="text"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				outline
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				outline
				type="primary"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				outline
				type="info"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				outline
				type="success"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				outline
				type="warning"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
			<Button
				outline
				type="error"
				shape="circle"
			><Icon name="bi-fingerprint"/></Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
				disabled
			>text</Button>
			<Button
				disabled
			>default</Button>
			<Button
				type="primary"
				disabled
			>primary</Button>
			<Button
				type="info"
				disabled
			>info</Button>
			<Button
				type="success"
				disabled
			>success</Button>
			<Button
				type="warning"
				disabled
			>warning</Button>
			<Button
				type="error"
				disabled
			>error</Button>
		</div>
		<div
			class="doc-container"
			style="background:rgb(241,245,255)"
		>
			<Button
				outline
				type="text"
				disabled
			>text</Button>
			<Button
				outline
				disabled
			>default</Button>
			<Button
				outline
				type="primary"
				disabled
			>primary</Button>
			<Button
				outline
				type="info"
				disabled
			>info</Button>
			<Button
				outline
				type="success"
				disabled
			>success</Button>
			<Button
				outline
				type="warning"
				disabled
			>warning</Button>
			<Button
				outline
				type="error"
				disabled
			>error</Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
				shape="round"
				disabled
			>text</Button>
			<Button
				shape="round"
				disabled
			>default</Button>
			<Button
				type="primary"
				shape="round"
				disabled
			>primary</Button>
			<Button
				type="info"
				shape="round"
				disabled
			>info</Button>
			<Button
				type="success"
				shape="round"
				disabled
			>success</Button>
			<Button
				type="warning"
				shape="round"
				disabled
			>warning</Button>
			<Button
				type="error"
				shape="round"
				disabled
			>error</Button>
		</div>
		<div
			class="doc-container"
			style="background:rgb(241,245,255)"
		>
			<Button
				outline
				type="text"
				shape="round"
				disabled
			>text</Button>
			<Button
				outline
				shape="round"
				disabled
			>default</Button>
			<Button
				outline
				type="primary"
				shape="round"
				disabled
			>primary</Button>
			<Button
				outline
				type="info"
				shape="round"
				disabled
			>info</Button>
			<Button
				outline
				type="success"
				shape="round"
				disabled
			>success</Button>
			<Button
				outline
				type="warning"
				shape="round"
				disabled
			>warning</Button>
			<Button
				outline
				type="error"
				shape="round"
				disabled
			>error</Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
				loading
			>text</Button>
			<Button
				loading
			>default</Button>
			<Button
				type="primary"
				loading
			>primary</Button>
			<Button
				type="info"
				loading
			>info</Button>
			<Button
				type="success"
				loading
			>success</Button>
			<Button
				type="warning"
				loading
			>warning</Button>
			<Button
				type="error"
				loading
			>error</Button>
			<Button
				type="primary"
				loading="加载文字"
			>primary</Button>
			<Button
				type="primary"
				loading
			>
				primary
				<template #loading>
					加载插槽
				</template>
			</Button>
		</div>
		<div class="doc-container">
			<Button
				type="text"
				loading
				loading-type="dot"
			>text</Button>
			<Button
				loading
				loading-type="dot"
			>default</Button>
			<Button
				type="primary"
				loading
				loading-type="dot"
			>primary</Button>
			<Button
				type="info"
				loading
				loading-type="dot"
			>info</Button>
			<Button
				type="success"
				loading
				loading-type="dot"
			>success</Button>
			<Button
				type="warning"
				loading
				loading-type="dot"
			>warning</Button>
			<Button
				type="error"
				loading
				loading-type="dot"
			>error</Button>
			<Button
				type="primary"
				loading="加载文字"
				loading-type="dot"
			>primary</Button>
		</div>
	</div>
</template>

<script setup>
import {Button,Ellipsis,Icon} from 'powerful-ui/pc-default';
</script>

<style lang="scss">
.doc_pc_components_Button{
	.doc-container{
		padding-left:10px;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
	}
	.pf-Button{
		margin:15px 0 15px 15px;
		flex-shrink:0;
	}
}
</style>